<template>
	<view class="illustrateBox">
		<view class="one" @click="oneClick">
			<view class="left">
				<view class="icon"></view>
				<view class="text">
					关于租赁设备说明
				</view>
			</view>
			<view :class="oneShow==true?'right revolve':'right'"></view>
		</view>
		<view class="oneMsg" v-if="oneShow">
			<view class="header">
				租赁须知
			</view>
			<view class="title">
				<view class="ordinal">
					01
				</view>
				<view class="text">
					快递费用
				</view>
			</view>
			<ol class="msg">
				<li>寄出的运费是采用“谁寄出谁承担”的方式，由寄方承担。优先使用的是顺丰快递，偏远地区以实际到达快递为准。</li>
			</ol>
			<view class="title">
				<view class="ordinal">
					02
				</view>
				<view class="text">
					订单取消
				</view>
			</view>
			<ol class="msg">
				<li>未发货订单：可在“我的-待审核-取消订单"点击取消。平台会在48小时内处理完成，如遇到取消失败，请联系在线客服。
				</li>
				<li>已发货订单：不支持取消订单和7天无理由退换货。</li>
			</ol>
			<view class="title">
				<view class="ordinal">
					03
				</view>
				<view class="text">
					提前归还商品
				</view>
			</view>
			<ol class="msg">
				<li>租完归还/续租的产品，需要支付与未到期租金、服务费等额的违约金。6 个月后随时续租/买断/归还的产品，客户需要支付与6个月租金、服务费与已支付租金、服务费的差额作为违约金。</li>
			</ol>
			<view class="title">
				<view class="ordinal">
					04
				</view>
				<view class="text">
					违约责任
				</view>
			</view>
			<ol class="msg">
				<li>客户应在租赁期限届满后7 个自然日内通过邮寄方式归还租赁设备超过7个自然日后收取客户租金和违约金。</li>
				<li>客户逾期归还设备超过7天，触发“租转售”条款，客户所租赁的租赁物将产生由租转售的效力。</li>
				<li>客户逾期支付租金超过 10天，触发“租转售”条款，客户所租赁的租赁物将产生由租转售的效力。</li>
				<li>客户租赁服务期内，如约支付了租金、买断尾款及其他相关费用后选择买断该产品的，在支付买断尾款后，该租赁设备按照“现实现状归客户所有。此时买断尾款=买断价-已支付租金，买断价指当期租期对应的买断价。
				</li>
				<li>因租赁人原因导致违约，应承当违约责任或赔偿责任的范围包括但不限于守约方的违约责任或赔偿责任所发生的诉讼费、保全费、公告费、调查费、差旅交通费、食宿费等费用</li>
				<li>履行过程中引起的争议，各方应以友好协商的方式解决，若经协商仍未能解决的，各方均同意提请商户或平台所在地区有管辖权的法院审理</li>
			</ol>
			<view class="orTitle">
				服务标准
			</view>
			<view class="erjiTitle">
				<view class="yuan"></view>
				<view class="text">
					关于租赁服务设备说明
				</view>
			</view>
			<view class="desc">
				租赁服务设备及租赁服务的定义,租赁服务设备系指商户通过合法渠道采购，并将租赁服务设备转让给您使用(设备所有权归属商户)，同时向您提供相关服务。租赁期间，您在支付相应租金后享有租赁服务设备的使用权，若您未按时支付租金则无法享有租赁服务设备的使用权，商户有权停止向您提供租赁服务并停用租赁服务设备。在订单交易成功后，您可以享受以下租赁服务内容：
			</view>
			<ul class="ss">
				<li>租赁服务设备使用权。</li>
				<li>顺丰寄出包邮服务。</li>
				<li>极速发货服务:订单审核通过后约48小时发货(节假日顺延，如遇订单缺货，会提前与您沟通协商)。</li>
				<li>随租随还服务：订单在满足「随租随还，条件后，您可在当期租期内提前归还设备，无需支付违约金，当期剩余租金不退。</li>
			</ul>
		</view>
		<view class="two" @click="twoClick">
			<view class="left">
				<view class="icon"></view>
				<view class="text">
					关于租赁服务损耗&损耗标准
				</view>
			</view>
			<view :class="twoShow==true?'right revolve':'right'"></view>
		</view>
		<view class="twoMsg" v-if="twoShow">
		</view>
		<view class="three" @click="threeClick">
			<view class="left">
				<view class="icon"></view>
				<view class="text">
					关于您隐私保障服务说明
				</view>
			</view>
			<view :class="threeShow==true?'right revolve':'right'"></view>
		</view>
		<view class="threeMsg" v-if="threeShow">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oneShow: false,
				twoShow: false,
				threeShow: false
			}
		},
		methods: {
			oneClick() {
				if (this.oneShow == false) {
					this.oneShow = true
				} else {
					this.oneShow = false
				}
			},
			twoClick() {
				if (this.twoShow == false) {
					this.twoShow = true
				} else {
					this.twoShow = false
				}
			},
			threeClick() {
				if (this.threeShow == false) {
					this.threeShow = true
				} else {
					this.threeShow = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.illustrateBox {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.one,
		.two,
		.three {
			width: 100%;
			height: 120rpx;
			border-radius: 10rpx;
			display: flex;
			background-color: white;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.icon {
					width: 30rpx;
					height: 30rpx;
					background-image: url("/static/detail/illustrate.png");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					margin-left: 40rpx;
					margin-right: 20rpx;
				}

				.text {
					font-size: 32rpx;
				}
			}

			.right {
				width: 30rpx;
				height: 30rpx;
				background-image: url("/static/my/right_ccc.svg");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				margin-right: 20rpx;
			}

			.revolve {
				transform: rotate(90deg);
			}
		}

		.two {
			margin-top: 6rpx;
		}

		.three {
			margin-top: 6rpx;
		}

		.oneMsg,
		.twoMsg,
		.threeMsg {
			width: 100%;
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.oneMsg {

			.header {
				width: 95%;
				height: 70rpx;
				margin: 20rpx 0;
				font-size: 34rpx;
				line-height: 70rpx;
				font-weight: bold;
			}

			.title {
				width: 95%;
				height: 70rpx;
				display: flex;

				.ordinal {
					font-size: 50rpx;
					line-height: 70rpx;
					font-weight: bold;
					color: #FCD748;
				}

				.text {
					width: auto;
					height: 40rpx;
					margin-left: 20rpx;
					font-weight: bold;
					line-height: 70rpx;
					font-size: 34rpx;
					border-bottom: 20rpx solid #FCD748;
				}
			}

			.msg {
				list-style-position: inside;
				width: 95%;
				padding: 0;
				margin: 20rpx 0;

				>li {
					font-size: 26rpx;
					color: #333333;
					margin: 10rpx 0;
				}
			}

			.orTitle {
				width: 95%;
				height: 70rpx;
				font-size: 35rpx;
				font-weight: bold;
			}

			.erjiTitle {
				width: 95%;
				height: 70rpx;
				display: flex;
				align-items: center;

				.yuan {
					width: 12rpx;
					height: 12rpx;
					border: 2px solid #f26662;
					border-radius: 50%;
				}

				.text {
					margin-left: 20rpx;
					color: #f26662;
					font-size: 30rpx;
				}
			}

			.desc {
				width: 90%;
				align-self: end;
				margin-right: 3%;
				font-size: 26rpx;
			}

			.ss {
				width: 90%;
				align-self: end;
				margin-right: 3%;
				font-size: 26rpx;

				>li {
					margin-top: 20rpx;
					list-style: none;
					background-image: url("/static/detail/ss.png");
					background-size: 25rpx 25rpx;
					background-repeat: no-repeat;
					text-indent: 40rpx;
				}
			}
		}
	}
</style>